<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <text-display-cell
      v-if="!editState"
      :text="value"
      :columnConfig="columnsConfig"
      v-bind="contentStyle"
    />
    <a-select
      v-else
      :value="value"
      :label-in-value="isArrayValue"
      :options="dataSource || []"
      class="full-width"
      @change="handleValueChange"
    />
  </cell-wrapper>
</template>

<script>
import { computed, defineComponent } from 'vue';
import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
import { judgeCellEditable } from '@/utils/index';

export default defineComponent({
  name: 'OptionsTableCell',
  components: {
    TextDisplayCell,
    CellWrapper,
  },
  inheritAttrs: false,
  props: {
    // 当前单元格的值
    value: {
      type: [Number, String, null, Array],
      default: () => {
        return null;
      },
    },
    // 单元格的默认样式
    defaultStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 单元格的条件样式配置
    conditionStyle: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 当前行的数据
    rowData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
    conditionValueMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 当前列的配置
    columnsConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 当前单元格依赖的外部数据源
    dataSource: {
      type: Array,
      default: () => [],
    },
    // 当前单元格是否处于编辑状态
    isEdit: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  emits: ['change'],
  setup(props, { emit }) {
    const editState = computed(() => {
      return (
        props.isEdit &&
        judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
      );
    });
    const optionsMap = computed(() => {
      const result = {};
      (props.dataSource || []).forEach((optionItem) => {
        const { value, label } = optionItem;
        result[value] = label;
      });

      return result;
    });

    // 内容显示的样式
    const contentStyle = computed(() => {
      let { iconType, icon, color, backgroundColor } =
      props.columnsConfig.contentConfig.defaultStyle || {};

      // 此处可添加条件格式的处理逻辑

      return { iconType, icon, color, backgroundColor };
    });
    const isArrayValue = computed(() => {
      const { value } = props;
      return value && Array.isArray(value);
    });
    function handleValueChange(value) {
      // 表单API需要数组对象，其它API只需要string
      emit('change', isArrayValue.value ? [value] : value);
    }

    return {
      editState,
      optionsMap,
      contentStyle,
      handleValueChange,
      isArrayValue,
    };
  },
});
</script>

<style scoped>
.full-width {
  width: 100%;
}
</style>
